<template>
	<view class="checkup-depressed-entry" :class="{'checkup-depressed-entry-res-ad':isResAd}"
		:style="[{backgroundImage:'url('+boxBg+')'},sty]" @click="toCheckup">
		<template v-if="isResAd">
			<view class="row-1">青少年抑郁双相诊断</view>
			<view class="row-2">测心情，解抑郁，向阳而生</view>
			<view class="row-3">
				<view class="col-1">5个测评 超多维度</view>
				<view class="col-2">
					<view class="price-wrapper">
						<view class="num">{{price}}</view>
						<view class="unit">元</view>
					</view>
					<view class="tip-text">
						<image class="img" :src="staticImgs.tip" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="abs-viewnum">
				今日{{randomNumber}}人在检测
			</view>
		</template>
	</view>
</template>

<script>
	import {sclExaminationEshopReport} from '@/common/api/scl_api'
  import {mapGetters} from 'vuex'

  export default {
		props: {
			sourceType: {
				type: [String, Number],
				default: '17'
			},
			sty: {},
			isResAd: {
				type: [Boolean],
				default: false
			},
			bannerBoxBg: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				staticImgs: {
					boxBg: this.bannerBoxBg || (this.imgBaseURL + '/scl/checkup-depressed/entry-box-img.png'),
					boxBgAd: this.imgBaseURL + '/scl/checkup-depressed/entry-box-res-ad-img.png',
					tip: this.imgBaseURL + '/scl/checkup-depressed/entry-box-price-tip.png',
					btn: this.imgBaseURL + '/scl/checkup-mental/checkup-mental-entry-btn.png',
				},
				randomNumber: '',
				price: '',
        loading: false
			}
		},
		computed: {
      ...mapGetters('user', ['isEshopUser']),
			boxBg() {
				return this.isResAd ? this.staticImgs.boxBgAd : this.staticImgs.boxBg
			}
		},
		mounted() {
			this.checkDailyOpen()
			this.$u.api.getSclListByGroup().then(res => {
				if (res.data.success) {
					this.price = res.data.data.price
				}
			})
		},
		methods: {
			checkDailyOpen() {
				const lastOpenDate = uni.getStorageSync('isCheckUpOpenDate')
				const currentDate = new Date().toLocaleDateString()
				if (lastOpenDate !== currentDate || !uni.getStorageSync('isCheckUpOpenDateRandomNumber')) {
					// 如果当前日期与上次打开日期不同，则执行需要执行的操作
					this.randomNumber = Math.floor(Math.random() * 800 + 200);
					// 保存当前日期到localStorage，标记为已打开
					uni.setStorageSync('isCheckUpOpenDateRandomNumber', this.randomNumber)
					uni.setStorageSync('isCheckUpOpenDate', currentDate)
				} else {
					this.randomNumber = uni.getStorageSync('isCheckUpOpenDateRandomNumber')
				}
			},
			toCheckup() {
        if (this.isEshopUser) {
          if (this.loading) {
            return
          }
          this.loading = true
          sclExaminationEshopReport({
            sclTotalCode: 'scl_examination_depression'
          }).then(res => {
            if (res.data.data?.sclId && res.data.data?.reportId) {
              uni.redirectTo({
                url: '/subcontractorB/pages/sclResult/sclResult?id=' +
                    res.data.data.reportId +
                    '&sclReportType=2'
              })
            } else {
              uni.navigateTo({
                url: '/subcontractorC/pages/checkupDepressed/index?sourceType=' + this.sourceType
              })
            }
          }).finally(() => this.loading = false)
        } else {
          uni.navigateTo({
            url: '/subcontractorC/pages/checkupDepressed/index?sourceType=' + this.sourceType
          })
        }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.checkup-depressed-entry {
		width: 720rpx;
		height: 210rpx;
		background-size: 100%;
		background-repeat: no-repeat;

		overflow: hidden;
		margin: auto;
		margin-bottom: 0;
		margin-top: -18rpx;

		position: relative;
		box-sizing: border-box;
		padding-left: 30rpx;
		z-index: 5;

		.row-1 {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: bold;
			font-size: 45rpx;
			color: #292799;
			line-height: 68rpx;
			letter-spacing: 3px;
			text-align: left;
			font-style: normal;

			margin-top: 68rpx;
			margin-bottom: 8rpx;
		}

		.row-2 {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 30rpx;
			color: #1D2E73;
			line-height: 45rpx;
			letter-spacing: 2px;
			text-align: left;
			font-style: normal;
		}

		.row-3 {
			display: flex;
			margin-top: 16rpx;

			.col-1 {
				width: 294rpx;
				height: 60rpx;
				background: linear-gradient(180deg, rgba(163, 104, 255, .3) 0%, rgba(80, 28, 255, .3) 100%);
				border-radius: 30rpx;

				line-height: 294rpx;
				line-height: 60rpx;

				font-family: PingFangSC, PingFang SC;
				font-size: 28rpx;
				color: #FFFFFF;
				letter-spacing: 1px;
				text-align: center;
				font-style: normal;
			}

			.col-2 {
				margin-top: -16rpx;
				margin-left: 12rpx;
				position: relative;

				.price-wrapper {
					display: flex;
					align-items: flex-end;

					.num {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 60rpx;
						color: #5553BA;
						line-height: 84rpx;
						text-align: justify;
						font-style: normal;
					}

					.unit {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #5553BA;
						line-height: 64rpx;
						text-align: justify;
						font-style: normal;
						margin-left: 8rpx;
					}

				}

				.tip-text {
					position: absolute;
					right: -84rpx;
					top: -4rpx;

					width: 88rpx;
					height: 40rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}

			}

		}


		.abs-viewnum {
			position: absolute;
			right: 16rpx;
			bottom: 30rpx;

			font-family: PingFang-SC, PingFang-SC;
			font-size: 24rpx;
			color: #1D2E73;
			text-align: justify;
			font-style: normal;
		}

	}

	.checkup-depressed-entry-res-ad {
		height: 292rpx;
		width: 648rpx;
		margin: auto;
		margin-top: auto;
		padding-left: 28rpx;

		.row-1 {
			margin-top: 88rpx;
			margin-bottom: 4rpx;

			font-size: 41rpx;
			line-height: 61rpx;
		}

		.row-2 {
			font-size: 27rpx;
			line-height: 41rpx;
		}

		.row-3 {
			.col-1 {
				width: 264rpx;
				height: 54rpx;
				border-radius: 27rpx;
				font-size: 25rpx;
				line-height: 54rpx;
			}

			.col-2 {
				.price-wrapper {
					.num {
						font-size: 54rpx;
					}

					.unit {
						font-size: 23rpx;
					}
				}
			}
		}

		.abs-viewnum {
			font-size: 22rpx;
			bottom: 10rpx;
		}
	}
</style>